<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Yolo3</title>
    <script>
        // if ('serviceWorker' in navigator) {
        //   window.addEventListener('load', function() {
        //     navigator.serviceWorker.register(`${window.location.origin}/mobilenetv2-yolov3/tfjs/sw.js`).then(reg=>reg.update());
        //   });
        // }
    </script>
</head>
<body>
    <canvas is="yolov3-detection" model="https://fsx950223.github.io/mobilenetv2-yolov3/tfjs/model.json" anchors="https://fsx950223.github.io/mobilenetv2-yolov3/model_data/yolo_anchors.txt" classes="https://fsx950223.github.io/mobilenetv2-yolov3/model_data/voc_classes.txt" src="https://fsx950223.github.io/mobilenetv2-yolov3/tfjs/000001.jpg" width=416 height=416></canvas>
    <input type="file" id="input_file"/>
    <script src="https://fsx950223.github.io/mobilenetv2-yolov3/tfjs/tf.min.js"></script>
    <script type="module" src="https://fsx950223.github.io/mobilenetv2-yolov3/tfjs/yolov3.js"></script>
    <script>
        document.querySelector('#input_file').addEventListener('change',(event)=>{
            document.querySelector('canvas').draw(event.currentTarget.files[0])
        })
    </script>
</body>
</html>